<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		:loading-more-custom-style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
		<template #top>
			<view class="zpagin_top">
				<nav-bar :iconLeft="true" />
				<view class="search">
					<custom-search v-model="queryParams.search" @search="refreshList" placeholder="请输入用户姓名" />
					<picker mode="date" :value="date" fields="month" @change="bindDateChange">
						<uni-easyinput v-model="date" placeholder="请输入货品分类名称" :clearable="false" />
					</picker>
				</view>
			</view>
		</template>
		<uni-card v-for="item in dataList" :key="item.id" margin="10px" spacing="0">
			<template v-slot:title>
				<uni-list>
					<uni-list-item :title="item.full_name" :note="item.classify_display" thumbSize="lg">
						<template v-slot:footer>
							<up-tag size="mini" :text="status_list[item.review_status].text" plain plainFill
								:type="status_list[item.review_status].type" />
						</template>
					</uni-list-item>
				</uni-list>
			</template>
			<view class="ctent">部门：{{ item.group_name }}</view>
			<view class="con_button" v-if="$hasPerm(['901002'])" v-show="item.review_status == '待审核'"
				@click.stop="hanldAct(item)">
				审核
			</view>
			<view class="con_button" v-if="$hasPerm(['901003'])" v-show="item.review_status == '已审核'"
				@click.stop="backApply(item)">
				反审核
			</view>
		</uni-card>
		<template #bottom>
			<custom-popup :popupShow="popupShow" mode="center" :title="titlePop" width="96%" :closeable="false"
				:closeOnClickOverlay="false" height="70vh" @close="popupShow = false">
				<z-paging v-if="popupShow" ref="paging_car" :refresher-enabled="false" :loading-more-enabled="false"
					:fixed="false" v-model="car_list" @query="queryList_car">
					<uni-card v-for="(item, index) in car_list" :key="index" margin="5px" spacing="0">
						<view class="con">
							<view class="ctent">{{ item.time }}</view>
							<view class="ctent" style="flex: none;"> <up-tag size="mini" :text="item.status" plain plainFill
									:type="holidayStatus(item.status)" /></view>
						</view>
					</uni-card>
					<template #bottom>
						<uni-card margin="0" spacing="0">
							<uni-forms labelPosition="left" :model="form" ref="refForm" labelWidth="90px">
								<uni-forms-item label="满勤天数" name="start_time" required>
									<up-number-box v-model="form.full_days" :min="0" integer :max="daysInMonth" @change="fullOnChange" />
								</uni-forms-item>
								<uni-forms-item label="缺勤天数" name="absent_days" required>
									<up-number-box v-model="form.absent_days" :min="0" integer :max="form.full_days"
										@change="absentOnChange" />
								</uni-forms-item>
								<uni-forms-item label="实际出勤" name="actual_days" required>
									<view style="height: 100%;display: flex;align-items: center;font-size: 16px;">
										{{ form.actual_days }}
									</view>
								</uni-forms-item>
							</uni-forms>
							<view class="btn-box" style="justify-content: end;">
								<view>
									<up-button size="small" text="取消" @click="popupShow = false" />
								</view>
								<view>
									<up-button type="primary" size="small" text="确认" @click="save" />
								</view>
							</view>
						</uni-card>
					</template>
				</z-paging>
			</custom-popup>
		</template>
	</z-paging>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import acMenologyApi from '../../../api/account/ac_menology'
import { swipeActPer } from '@/utils/permission'
onLoad(() => {
	getNowY_M()
})
const status_list = {
	'待审核': { text: '待审核', type: 'warning' },
	'已审核': { text: '已审核', type: 'primary' },
}

function holidayStatus(v) {
	if (v === '正常') {
		return 'success'
	} else if (v.includes('加班')) {
		return 'primary'
	} else {
		return 'error'
	}
}


const date = ref('')
const daysInMonth = ref(31)
function bindDateChange(e) {
	date.value = e.detail.value
	const year = e.detail.value.split('-')[0]
	const month = e.detail.value.split('-')[1]
	queryParams.year = year
	queryParams.month = month
	daysInMonth.value = new Date(year, month, 0).getDate()
	refreshList()
}

function getNowY_M() {
	const now = new Date()
	const year = String(now.getFullYear())
	const month = String(now.getMonth() + 1).padStart(2, '0')
	date.value = `${year}-${month}`
	daysInMonth.value = new Date(year, month, 0).getDate()
	queryParams.year = year
	queryParams.month = month
}



//查询参数
const queryParams = reactive({});
//获取paging实例
const paging = ref(null)
const dataList = ref([])
//列表数据方法
function queryList(pageNo, pageSize) {
	const params = {
		page: pageNo,
		page_size: pageSize,
		...queryParams
	}
	acMenologyApi.get_hr_menology(params).then((res) => {
		paging.value?.complete(res.results);
	})
}

function get_detail(id) {
	acMenologyApi.overtime_detail(id).then(res => {
		const record = uni.$lodash.pick(res, fields)
		Object.assign(form, record)
		popupShow.value = true
	})
}

function fullOnChange(e) {
	form.actual_days = e.value - form.absent_days
}
function absentOnChange(e) {
	form.actual_days = form.full_days - e.value
}


const refForm = ref(null);
const form = reactive({
	user:'',
	full_days: '',
	absent_days: 0,
	actual_days: '',
});
const fields = Object.keys(form);
const titlePop = ref('弹窗')
const popupShow = ref(false)

function hanldAct(item) {
	titlePop.value = item.full_name
	form.user = item.user_id
	form.year = queryParams.year
	form.month = queryParams.month
	form.full_days = daysInMonth.value
	form.actual_days = daysInMonth.value
	car_list.value = Object.entries(item.attendance).map(([time, status]) => ({
		time, status
	}))
	popupShow.value = true
}

const paging_car = ref(null)
const car_list = ref([])
function queryList_car() {
	paging_car.value.complete(car_list.value);
}

function save() {
	refForm.value.validate().then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		acMenologyApi.post_attendance_review(params).then((res) => {
			uni.$u.toast('修改成功')
			setTimeout(() => {
				cancal()
				refreshList();
			}, 500)
		})

	}).catch((error) => {
		uni.$u.toast(error[0].errorMessage);
	})
};

function backApply(item) {
	acMenologyApi.delete_attendance_review(item.check_id).then(res => {
		uni.$u.toast('反审核成功')
		setTimeout(() => {
			refreshList();
		}, 500)
	})
}

function cancal() {
	popupShow.value = false
	Object.assign(form, {
		id: null,
		user: '',
		start_time: '',
		end_time: '',
		content: '',
	})
}

//刷新列表数据方法
function refreshList() {
	paging.value?.reload()
};
</script>

<style lang="scss"></style>